<template>
  <section
    :class="{ visabled: hidden }"
    class="component pending-collection-query"
  >
    <div :class="{ 'not-hidden': !hidden }" class="title row between-span">
      <span class="title-name">案件列表</span>
      <div @click="hidden = !hidden" class="title-button">
        <svg-icon
          :class="{ hidden: hidden }"
          iconName="zhankaianjian"
          iconSize="24"
        ></svg-icon>
      </div>
    </div>
    <data-form
      :model="model"
      :page="page"
      @onSearch="refreshData"
      class="dataform"
      hiddenReset
      v-show="!hidden"
    >
      <template slot="inputs">
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="model.personalName"></el-input>
        </el-form-item>
        <el-form-item label="行动代码" prop="followupBack">
          <el-select
            clearable
            placeholder="请选择"
            v-model="model.followupBack"
          >
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('FollowupBack')"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box
      :cellStyle="cellStyle"
      :data="dataSource"
      :page="page"
      :sort="sort"
      @onPageChange="refreshData"
      @onRowClick="onRowClick"
      class="databox"
      hiddenIndex
      ref="dataBox"
      showlineStyle
      v-loading="loading.state"
      v-show="!hidden"
    >
      <!--数据列区域-->
      <template slot="columns">
        <el-table-column
          :min-width="$helper.getColumnWidth(2)"
          label="姓名"
          prop="personalName"
        ></el-table-column>
        <el-table-column
          :formatter="
            row => $filter.dictConvert(row.followupBack, 'FollowupBack')
          "
          :min-width="$helper.getColumnWidth(3)"
          label="行动代码"
          prop="followupBack"
        ></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import DataBox from "~/components/common/data-box.vue";
import { State, Mutation, namespace } from "vuex-class";
import { Dependencies } from "~/core/decorator";
import { TelCaseManageService } from "~/services/domain-service/tel-case-manage.service";
import { VisitCaseManageService } from "~/services/domain-service/visit-case-manage.service";
import { LegalCaseManageService } from "~/services/domain-service/legal-case-manage.service";
const CollectionExecutionModule = namespace("collection-execution");
import { MENU_CHANNEL } from "~/config/enum.config.ts";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";

@Component({
  components: {
    DataBox
  }
})
export default class PendingCollectionQuery extends Vue {
  @Dependencies(VisitCaseManageService)
  private visitCaseManageService: VisitCaseManageService;

  @Dependencies(TelCaseManageService)
  private telCaseService: TelCaseManageService;
  @Dependencies(LegalCaseManageService)
  private legalCaseManageService: LegalCaseManageService;
  @Dependencies(SortService)
  private sort: SortService;
  @Dependencies(PageService)
  private page: PageService;

  @CollectionExecutionModule.State private menuChannel: MENU_CHANNEL;
  @CollectionExecutionModule.State private otherData: any;
  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.Mutation private updateCaseId;

  private model: any = {
    personalName: "",
    followupBack: ""
  };

  private dataSource: any[] = [];
  private rowIndex: number = -1;
  private loading: any = { state: false };

  private hidden = true;
  private hover = false;

  private created() {
    this.page.layout = "total, prev, next";
    this.page.update({
      totalElements: this.otherData.page.total,
      totalPages: this.otherData.page.totalPage
    });
    this.page.pageIndex = this.otherData.page.pageIndex;
  }

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    const queryData = { ...this.otherData.data, ...this.model };
    this.loading.state = true;
    switch (this.menuChannel) {
      case MENU_CHANNEL.Tel_team:
        this.telCaseService
          .teamCasePool(queryData, this.page, this.sort)
          .subscribe(this.onDataRefreshComplete);
        break;
      case MENU_CHANNEL.Tel_personal:
        this.telCaseService
          .teamCasePool(queryData, this.page, this.sort)
          .subscribe(this.onDataRefreshComplete);
        break;
      case MENU_CHANNEL.Visit_personal:
        this.visitCaseManageService
          .visitPersonalCasePool(queryData, this.page, this.sort)
          .subscribe(this.onDataRefreshComplete);
        break;
      case MENU_CHANNEL.Visit_team:
        this.visitCaseManageService
          .visitTeamCasePool(queryData, this.page, this.sort)
          .subscribe(this.onDataRefreshComplete);
      case MENU_CHANNEL.Legal_personal:
        this.legalCaseManageService
          .personalCasePool(queryData, this.page, this.sort)
          .subscribe(this.onDataRefreshComplete);
        break;
      case MENU_CHANNEL.Legal_team:
        this.legalCaseManageService
          .teamCasePool(queryData, this.page, this.sort)
          .subscribe(this.onDataRefreshComplete);
        break;
    }
  }

  private onDataRefreshComplete(data) {
    this.dataSource = data;
    this.loading.state = false;
  }

  private onRowClick(row, event, column) {
    this.updateCaseId(row.id);
  }

  private cellStyle({ row, columnIndex }) {
    if (row.id === this.caseId) {
      return { color: "#FF9666" };
    }
    if (columnIndex === 0) {
      return { cursor: "pointer" };
    }
  }
}
</script>

<style lang="less" scoped>
.component.pending-collection-query {
  width: 300px;
  .dataform {
    background-color: #fff;
    box-shadow: 1px 2px 4px 2px #d2d2d2;
  }
  .databox {
    background-color: #fff;
    box-shadow: 1px 2px 4px 2px #d2d2d2;
    .search {
      .el-input-group__prepend {
        padding: 0 10px;
      }
      .el-input__inner {
        box-sizing: unset;
      }
    }
    .el-pagination {
      .btn-prev {
        .el-icon {
          &:before {
            content: "< 上一页";
          }
        }
      }
      .btn-next {
        .el-icon {
          &:before {
            content: "下一页 >";
          }
        }
      }
    }
  }

  .title {
    color: #fff;
    height: 32px;
    line-height: 32px;
    background-color: #2a69c9;
    &-name {
      padding-left: 10px;
    }
    &-button {
      padding: 0 10px;
      cursor: pointer;
    }
  }

  .hidden {
    transition-duration: 0.5s;
    transform: rotate(180deg);
  }
}
.component.pending-collection-query.visabled {
  transition-duration: 0.5s;
  transform: translateX(-260px);
  .title {
    transition-duration: 1s;
    padding-top: 3px;
    // opacity: 0.5;
  }
  .title.not-hidden {
    transition-duration: 0.5s;
    opacity: 1;
  }
}
</style>
